<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  @@include('../include/header.html')
</head>

<body ontouchstart>


  <header class="eui-header ">

  </header>

  <section class="eui-container">
    <div class="demo-item">
      <p class="demo-desc">简单列表</p>
      <div class="demo-block">
        <ul class="eui-list eui-list-pure ui-border-tb">
          <li>
            <p><span>1.faycheng </span><span class="date"> 2月12日</span></p>
            <h4>这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。</h4>
          </li>
          <li>
            <p><span>2.faycheng </span><span class="date"> 2月12日</span></p>
            <h4>标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题</h4>
          </li>
          <li>
            <p><span>3.faycheng </span><span class="date"> 2月12日</span></p>
            <h4>标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题</h4>
          </li>
        </ul>
      </div>
    </div>

    <div class="demo-item">
      <p class="demo-desc">右边有内容的列表</p>
      <div class="demo-block">
        <ul class="eui-list eui-list-text">
          <li>
            <div class="eui-list-info">
              <h4 class="eui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
            <div class="eui-badge">new</div>
          </li>
          <li>
            <div class="eui-list-info">
              <h4 class="eui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
            <div class="eui-badge-muted">new</div>
          </li>
          <li>
            <div class="eui-list-info">
              <h4 class="eui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
            <div class="eui-badge-num">123</div>
          </li>
          <li>
            <div class="eui-list-info">
              <h4 class="eui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
            <div class="eui-reddot eui-reddot-static"></div>
          </li>
          <li>
            <div class="eui-list-info">
              <h4>标题标题标题标题标题标题标</h4>
            </div>
            <div class="eui-list-action">使用中</div>
          </li>
          <li>
            <div class="eui-list-info">
              <h4>标题标题标题标题标题标题标</h4>
            </div>
            <label class="eui-switch">
                        <input type="checkbox">
                    </label>
          </li>

        </ul>
      </div>
    </div>
    <div class="demo-item">
      <p class="demo-desc">右边有内容的列表</p>
      <div class="demo-block">
        <ul class="eui-list eui-list-text eui-list-link">
          <li>
            <h4>长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字</h4>
            <div class="ui-txt-info">男</div>
          </li>
          <li>
            <h4 class="ui-nowrap">生日</h4>
            <div class="ui-txt-info">1988年8月8日</div>
          </li>
        </ul>
      </div>
    </div>


    <div class="demo-item">
      <p class="demo-desc">图文列表带头像</p>
      <div class="demo-block">
        <ul class="eui-list eui-list-link">
          <li>
            <div class="eui-avatar">
              <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
            </div>
            <div class="eui-list-info">
              <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            </div>
          </li>
          <li>
            <div class="eui-avatar">
              <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
            </div>
            <div class="eui-list-info">
              <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
              <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

  </section>
  @@include('../include/footer.html')
</body>


</html>
